<template>
	<view>
		<view class="page-container">
			<!-- 底层图片 -->
			<image src="/pages/Car/static/图层1@2x.png" class="bg-image" mode="widthFix" />
		
			<!-- 上层可显示的内容（如文字、按钮等） -->
			<view class="top-content">
				<view class="navigator">添加车辆</view>
				<view class="carView">
					<view class="success-icon"></view>
					<view class="success-text">添加成功</view>
					<view class="return-button">返回</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style>
/* 父容器：用于约束子元素的定位范围 */
	.page-container {
		position: relative;
		/* 父容器相对定位，子元素可基于此绝对定位 */
		width: 100%;
		height: 100vh;
		/* 占满整个屏幕高度，可根据需求调整 */
	}

	/* 底层图片：z-index 设为较小值，确保在最底层 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
		/* 层级最低，作为背景 */
	}

	/* 上层内容：z-index 设为较大值，覆盖在图片上方 */
	.top-content {
		position: relative;
		z-index: 2;
		/* 层级高于图片，可显示在图片上方 */
		color: #fff;
		/* 文字颜色 */
		padding: 30rpx;
	}

	.navigator {
		display: flex;
		justify-content: center;
	}

	.carView {
		height: 500rpx;
		background-color: #fff;
		margin: 50rpx 15rpx;
		border-radius: 20rpx;
		padding: 50rpx 0;
	}
	
	.success-container {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    background: white;
	    border-radius: 12px;
	    padding: 40px 30px;
	    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	    max-width: 320px;
	    width: 90%;
	}
	
	.success-icon {
	    width: 80px;
	    height: 80px;
	    border-radius: 50%;
	    background: linear-gradient(135deg, #1e90ff, #00bfff);
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin-bottom: 20px;
		margin: 40rpx 230rpx;
	}
	
	.success-icon::after {
	    content: "";
	    width: 30px;
	    height: 15px;
	    border-left: 4px solid white;
	    border-bottom: 4px solid white;
	    transform: rotate(-45deg);
	    margin-top: -5px;
	}
	
	.success-text {
	    font: 600 18px/1.5 sans-serif;
	    color: #333;
	    margin: 0 240rpx;
	}
	
	.return-button {
		margin: 50rpx 150rpx;
	    background: #1e90ff;
	    color: white;
	    border-radius: 8px;
	    width: 100%;
		height: 70rpx;
	    max-width: 150px;
		text-align: center;
		line-height: 70rpx;
	    transition: background 0.3s;
	}
	
	.return-button:hover {
	    background: #0077e6;
	}
</style>
